<template>
    <div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:void(0)">
                    <div class="mui-media-body">
                        <h1>{{list.title}}</h1>
                        <!-- <p class='mui-ellipsis'>
                        <span>评论时间：Date</span>
                        <span>点击：click</span>
                        </p> -->
                    </div>
                </a>
            </li>
		</ul>
        <div class="desc">
            <img :src=list.info_detail1 alt="">
            <img :src=list.info_detail2 alt="">
        </div>
    </div>
</template>
<script>
export default {
    data:function () {
        return {
            list:[],
            id:this.$route.params.id,
        }
    },
    methods:{
        loadDesc:function (id) {
            this.$http.get('lib/interface7_shoplist.json').then((res)=>{
                if(res.body.status == "ok"){
                    var temp = [];
                    res.body.shoplists.forEach((item)=>{
                        temp = temp.concat(item);
                    });
                    this.list = temp[this.id - 1];
                    console.log(this.list);
                }
           });
        }
    },
    created:function () {
        this.loadDesc(this.id);
    },
    mounted:function () {
        setTimeout(function () {
           document.documentElement.scrollTop = window.pageYOffset = document.body.scrollTop = 0; 
        });
    }
}
</script>
<style lang="scss" scoped>
.mui-table-view{
    .mui-table-view-cell{
        a{
            height: 45px;
            padding-bottom: 0px;
            padding: 0;
            .mui-media-body{
                h1{
                    color: rgb(27, 178, 238);
                    margin-top: 10px;
                    font-weight: bold;
                    font-size: 22px;
                    text-align: center;
                    text-overflow: ellipsis;
                    white-space: nowrap; 
                    overflow: hidden;
                }
            }
        }
    }
}
.desc{
    img{
    width: 100%;
    }
}
</style>